<%@ page import="com.hyy.bean.Merchandise" %>
<%@ page import="java.util.List" %>
<%@ page import="com.hyy.bean.MaskUser" %><%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2020/11/12 0012
  Time: 14:58
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java"  pageEncoding="UTF-8"%>

<html>
<head>
    <title>毒潮商城</title>
	<link rel="stylesheet" href="css/merchandise.css" />
    <!--引入Bootstrap资源-->
    <!-- 新 Bootstrap 核心 CSS 文件 -->
	<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
	<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
	<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
	<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

</head>

<body bgcolor="#d0d0d0">
<nav class="navbar navbar-default">
	<div class="container-fluid">
		<!-- Brand and toggle get grouped for better mobile display -->
		<div class="navbar-header">
			<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
				<span class="sr-only">Toggle navigation</span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</button>
		</div>
		<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
			<ul class="nav navbar-nav">
				<li class="active"><a class="navbar-brand" href="/" style="color: black;font-weight:bold">毒潮商城</a></li>
				<li style="color: purple"><a>有毒的运动×潮流×好物</a></li>
			</ul>
			<ul class="nav navbar-nav navbar-right">
				<%if (request.getSession().getAttribute("user")==null){%>
					<li><a href="jsp/login.jsp">登入</a></li>
					<li><a href="jsp/register.jsp" >注册</a></li>
				<% }else { %>
					<li><a href="/toUsermsg">
						<span class="glyphicon glyphicon-user" aria-hidden="true"></span>
						<%=((MaskUser)request.getSession().getAttribute("user")).getUseraccount() %>
					</a></li>
					<li>
						<a href="/myCart">
							<span class="glyphicon glyphicon-shopping-cart" aria-hidden="true" ></span>
							购物车
							<span class="sr-only">(current)</span>
						</a>
					</li>
					<li><a onclick="if(confirm('确认注销？')==false)return false;location.href='/logout'">注销
					</a></li>
				<% } %>

			</ul>
		</div>
	</div>
</nav>

<div class="row">
	<div class="col-md-8 col-md-offset-2" >
		<div class="align-self-center">
			<div class="col-md-1 "><img src="img/毒.png" width="100%"></div>
			<div class="col-md-6 ">
				<ul class="nav navbar-nav" style="padding: 10px;">
					<li><a href="#" style=" color: orangered; font-size: 20px;">推荐</a></li>
					<li class="dropdown" >
						<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"
						   style="color: black;font-size: 16px;">鞋类 <span class="caret"></span></a>

						<ul class="dropdown-menu">
							<li><a href="#" style="color: crimson;font-size: 15px;">人气榜单</a></li>
							<li role="separator" class="divider"></li>
							<li><a href="#" >跑步鞋</a></li>
							<li><a href="#" >休闲鞋</a></li>
							<li><a href="#">篮球鞋</a></li>
							<li role="separator" class="divider"></li>
							<li><a href="#">更多</a></li>
						</ul>
					</li>
					<li class="dropdown">
						<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
						   aria-haspopup="true" aria-expanded="false"
						   style="color: black;font-size: 16px;">潮服<span class="caret"></span></a>

						<ul class="dropdown-menu">
							<li><a href="#" style="color: crimson;font-size: 15px;">人气榜单</a></li>
							<li role="separator" class="divider"></li>
							<li><a href="#">夹克外套</a></li>
							<li><a href="#">卫衣</a></li>
							<li><a href="#">羽绒棉衣</a></li>
							<li><a href="#">裤装</a></li>
							<li role="separator" class="divider"></li>
							<li><a href="#">更多</a></li>
						</ul>
					</li>
					<li><a href="#" style="color: black;font-size: 16px;">数码配饰</a></li>
					<li><a href="#" style="color: black;font-size: 16px;">箱包</a></li>
					<li><a href="#" style="color: black;font-size: 16px;">潮玩</a></li>
				</ul>
			</div>
			<div class="col-md-3 col-md-offset-2 navbar-right" 	>
				<form class="navbar-form navbar-left" action="/search" >
					<div class="input-group" style="padding-top: 20px;">
						<input type="text" class="form-control" id="keyword" name="keyword" placeholder="寻找属于你的潮流">
						<span class="input-group-btn">
							<button type="submit" class="btn btn-default">
								<span class="glyphicon glyphicon-search" aria-hidden="true"></span>查找
							</button>
						</span>
					</div>
				</form>
			</div>
		</div>
	</div>
</div>


<p></p>
<!-- 轮播 -->
<div class="row" >
	<!-- <div class="col-md-2"></div> -->
	<div class="col-md-8 col-md-offset-2">
		<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
			<!-- Indicators -->
			<ol class="carousel-indicators">
				<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
				<li data-target="#carousel-example-generic" data-slide-to="1"></li>
				<li data-target="#carousel-example-generic" data-slide-to="2"></li>
				<li data-target="#carousel-example-generic" data-slide-to="3"></li>
			</ol>

			<!-- Wrapper for slides -->
			<div class="carousel-inner" role="listbox" style="height: 400px;">
				<div class="item active">
					<img src="img/shop/轮播1.png" alt="..." width="100%">
				</div>
				<div class="item">
					<img src="img/shop/轮播2.png" alt="..." width="100%" >
				</div>
				<div class="item">
					<img src="img/shop/轮播3.jpg" alt="..." width="100%">
				</div>
				<div class="item">
					<img src="img/shop/轮播4.png" alt="..." width="100%" >
				</div>

			</div>

			<!-- Controls -->
			<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
				<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
				<span class="sr-only">Previous</span>
			</a>
			<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
				<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
				<span class="sr-only">Next</span>
			</a>
		</div>
	</div>
</div>

<!-- 商品 -->
<p></p>
<div class="row product">
	<div class="row">
		<div class="col-md-8 col-md-offset-2">
			<% List<Merchandise> merchandiseList =  (List<Merchandise>)request.getAttribute("merchandises");%>
			<%for(Merchandise merchandise:merchandiseList){%>
			<div class="col-md-3">
				<div class="thumbnail">
					<a href="/showDetail?id=<%=merchandise.getId()%>">
						<img src="img/<%=merchandise.getImg()%>" alt="..." class="img-responsive">
						<div class="caption">
							<h4><%=merchandise.getProductName()%></h4>
							<p style="color:red;">
								￥<%=merchandise.getPrice()%>起
							</p>
						</div>
					</a>
				</div>
			</div>
			<% }%>
		</div>
	</div>
</div>

<hr/>
<div class="row">
	<div class="col-md-8 col-md-offset-2">
		<div class="row">

			<div class="col-md-2 col-md-offset-1" style="text-align: center;">
				<div class="thumbnail" style="border: 0px;">
					<img src="img/末尾/true.png" alt="..." class="img-responsive" width="50%" >
					<div class="caption">
						<h4>正品货源</h4>
					</div>
				</div>
			</div>
			<div class="col-md-2" style="text-align: center;">
				<div class="thumbnail" style="border: 0px;">
					<img src="img/末尾/检查.png" alt="..." class="img-responsive" width="50%" >
					<div class="caption">
						<h4>入仓检验</h4>
					</div>
				</div>
			</div>
			<div class="col-md-2" style="text-align: center;">

				<div class="thumbnail" style="border: 0px;">
					<img src="img/末尾/货车.png" alt="..." class="img-responsive" width="50%" >
					<div class="caption">
						<h4>无忧退换</h4>
					</div>
				</div>
			</div>
			<div class="col-md-2" style="text-align: center;">
				<div class="thumbnail" style="border: 0px;">
					<img src="img/末尾/仓库.png" alt="..." class="img-responsive" width="50%" >
					<div class="caption">
						<h4>自营仓储</h4>
					</div>
				</div>
			</div>
			<div class="col-md-2" style="text-align: center;">
				<div class="thumbnail" style="border: 0px;">
					<img src="img/末尾/赔.png" alt="..." class="img-responsive" width="50%" >
					<div class="caption">
						<h4>正品保险</h4>
					</div>
				</div>
			</div>
		</div>
		<p style="background-color: black;color: aliceblue;font-size: 15px;"  align="center">
			<a href="#" style="color: aliceblue;">关于我们</a> |
			<a href="#" style="color: aliceblue;">About us</a> |
			<a href="#" style="color: aliceblue;">品牌招商</a> |
			<a href="#" style="color: aliceblue;">联系我们</a> |
			<a href="#" style="color: aliceblue;">隐私条例</a>
		</p>
	</div>
</div>
</body>
</html>
